<template>
  <a-tooltip placement="top">
          <template #title>
        <span >点击恢复诵读</span>
      </template>
  <NodeViewWrapper class="vue-component" ref="ViewWrapper" contenteditable="false" @click="del_node">
    <div class="cancel_Read_bd" contenteditable="false">
      <NodeViewContent class="content" contenteditable="false"/>
      <span class="cancel_Read_icon" contenteditable="false" style="margin-right: 3px;">
        <cu-icon type="icon-jingyin"></cu-icon>
      </span>
    </div>
    </NodeViewWrapper>
  </a-tooltip>
</template>

<script setup>
import { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
import {
} from "@ant-design/icons-vue";

const props = defineProps({
  node: Object,
  editor: Object
})

// 点击取消 节点状态
const del_node = () => {
  console.log(props, 'props');
  const text = props.node.attrs.cancelReadText
  const pos = props.getPos(); // 获取当前节点的位置
  props.editor.chain()
  .focus()
  .setNodeSelection(pos)
  .handleCancelReadToText(text)
  .run()
}

</script>

<style lang="less" scoped>
.vue-component {
  display: inline-block;
  cursor: pointer;
  .cancel_Read_bd {
    display: flex;
    border-bottom: 2px solid #5015a7;
    .cancel_Read_icon {
    display: inline-block;
    width: 22px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background-color: #5015a7;
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    border-radius: 2px;
  }
  .content{
    display: inline-block !important;
  }
    .cancel_Read {
      display: inline-block;
      // background-color: #9fc9fd;

    }
  }



}
</style>